<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><meta name="baidu-site-verification" content="1EB8XoOl0C"><meta name="google-site-verification" content="K7thEgdLm0UfRWJ5MGdF7sCcjClSzAlxFLPv2Oz5CGM"><title> Ts大法 · 页面仔小杨</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Ts大法 - 页面仔小杨"><meta name="keywords" content="js基础 ts总结"><meta name="author" content="页面仔小杨"><link rel="short icon" href="/images/favicon.ico"><link rel="stylesheet" href="/css/bubuzou.css"><link rel="search" type="application/opensearchdescription+xml" href="http://itxing666.gitee.io/atom.xml" title="页面仔小杨"><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script><meta name="generator" content="Hexo 4.2.0"><link rel="alternate" href="/atom.xml" title="页面仔小杨" type="application/atom+xml">
</head><body><header><div class="header row"> <a href="/" class="logo-link"><img src="/images/logo.png"></a><ul id="nav_list" class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" data-hover="博文" class="nav-list-link">博文</a></li><li class="nav-list-item"><a href="/archives/" target="_self" data-hover="归档" class="nav-list-link">归档</a></li><li class="nav-list-item"><a href="/about/" target="_self" data-hover="关于" class="nav-list-link">关于</a></li></ul><div class="search"><a id="search_btn" href="#search"></a></div><div id="nav_btn" class="nav-btn"><span></span><span></span><span></span></div></div></header><div class="row scroll-con"><section class="container"><!-- for archive page--><div id="postAr" class="post"><article class="post-block"><h1 class="post-title">Ts大法</h1><div class="post-info">2020-06-12</div><div class="post-content"><p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/126.png" alt="126"></p>
<h3 id="环境搭建-node环境"><a href="#环境搭建-node环境" class="headerlink" title="环境搭建(node环境)"></a>环境搭建(node环境)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br><span class="line">npm -v</span><br><span class="line">npm install typescript -g</span><br><span class="line">tsc -v</span><br></pre></td></tr></table></figure>

<p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/134.png" alt="134"></p>
<h3 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">mkdir ts-demo</span><br><span class="line">cd ts-demo</span><br><span class="line">npm init -y</span><br><span class="line">tsc --init</span><br><span class="line">touch helloWorld.ts</span><br></pre></td></tr></table></figure>

<p>编写helloWorld.ts文件</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a:<span class="built_in">string</span> = <span class="string">"HelloWorld"</span></span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br></pre></td></tr></table></figure>

<p>运行</p>
<p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/136.png" alt="136"></p>
<a id="more"></a>

<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><table>
<thead>
<tr>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>undefined</td>
<td></td>
</tr>
<tr>
<td>boolean</td>
<td>let isDone: boolean = false</td>
</tr>
<tr>
<td>number</td>
<td>let age:number = 18</td>
</tr>
<tr>
<td>string</td>
<td>let name:string = “页面仔小杨”</td>
</tr>
<tr>
<td>Array</td>
<td>let list: number[] = [1, 2, 3]<br />let list: Array&lt;number&gt; = [1, 2, 3]</td>
</tr>
<tr>
<td>元组Tuple</td>
<td>let x: [string, number]<br /> x = [‘hello’, 10]</td>
</tr>
<tr>
<td>枚举enum</td>
<td>enum Color {Red = 1, Green = 2, Blue = 4}<br /> let c: Color = Color.Green</td>
</tr>
<tr>
<td>any</td>
<td>let notSure: any = 4</td>
</tr>
<tr>
<td>void</td>
<td>没有返回值</td>
</tr>
<tr>
<td>null</td>
<td></td>
</tr>
<tr>
<td>object</td>
<td>function create(o: object | null): void</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>
<h3 id="特殊符号用法"><a href="#特殊符号用法" class="headerlink" title="特殊符号用法"></a>特殊符号用法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; ?.  当 product没有值的时候，不访问其 price属性</span><br><span class="line">product?.price </span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; ??  当i为null或undefined时，k为5(和||相似，但在处理0上不同)</span><br><span class="line">const k &#x3D; i ?? 5</span><br><span class="line">const k &#x3D; 0 ?? 5  &#x2F;&#x2F; 0</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; ?: 可选参数</span><br><span class="line">interface ListForm &#123;</span><br><span class="line">  enterpriseId: string | number;</span><br><span class="line">  pageNum: number;</span><br><span class="line">  pageSize: number;</span><br><span class="line">  keyword?: string; &#x2F;&#x2F; 可选属性</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="函数传参"><a href="#函数传参" class="headerlink" title="函数传参"></a>函数传参</h3><ol>
<li><p>可选参数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function fun(a:number, b?:string):string &#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>默认值参数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function fun(a:number, b:string&#x3D;&#39;默认值&#39;):string  &#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>rest参数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function fun(a:number, ...b:string[]):string &#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br><span class="line">fun(1, &#39;hello&#39;, &#39;world&#39;) &#x2F;&#x2F; b: [&#39;hello&#39;, &#39;world&#39;]</span><br></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="变量作用域"><a href="#变量作用域" class="headerlink" title="变量作用域"></a>变量作用域</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var name:string &#x3D; &#39;a-name&#39;</span><br><span class="line"></span><br><span class="line">function fun():void &#123;</span><br><span class="line">    console.log(&#96;名字$&#123;name&#125;&#96;)  &#x2F;&#x2F; 变量提升 var name:string  undefined</span><br><span class="line">    var name:string &#x3D; &#39;b-name&#39;</span><br><span class="line">    console.log(&#96;名字$&#123;name&#125;&#96;)  &#x2F;&#x2F; b-name</span><br><span class="line">&#125;</span><br><span class="line">fun()</span><br><span class="line">console.log(name) &#x2F;&#x2F; a-name</span><br></pre></td></tr></table></figure>

<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">class Greeter &#123;</span><br><span class="line">    greeting: string</span><br><span class="line">    constructor(message: string) &#123;</span><br><span class="line">        this.greeting &#x3D; message</span><br><span class="line">    &#125;</span><br><span class="line">    greet(): string &#123;</span><br><span class="line">        return &quot;Hello, &quot; + this.greeting</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let greeter: Greeter &#x3D; new Greeter(&quot;world&quot;)</span><br><span class="line">console.log(greeter.greet())</span><br></pre></td></tr></table></figure>

<h3 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h3><ul>
<li>public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符</li>
<li>protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为, 不能被类和子类的实例对象调用</li>
<li>private : 私有修饰符，只可以在类内使用private修饰的属性和行为,不能被类和子类的实例对象调用，只能在自身中调用私有方法</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">class People &#123;</span><br><span class="line">  public sex: string</span><br><span class="line">  protected name: string</span><br><span class="line">  private age: number</span><br><span class="line">  public constructor(sex: string, name: string, age: number)&#123;</span><br><span class="line">      this.sex &#x3D; sex</span><br><span class="line">      this.name &#x3D; name</span><br><span class="line">      this.age &#x3D; age</span><br><span class="line">  &#125;</span><br><span class="line">  public getName() &#123;</span><br><span class="line">      console.log(&#39;getName&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  protected getAge() &#123;</span><br><span class="line">      console.log(&#39;getAge&#39;)</span><br><span class="line">      return this.age</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class Man extends People &#123;</span><br><span class="line">&#125;</span><br><span class="line">let man1: Man &#x3D; new Man(&quot;男&quot;, &quot;man1&quot;, 18)</span><br><span class="line">console.log(man1.sex)</span><br><span class="line">console.log(man1.name) &#x2F;&#x2F; 报错</span><br><span class="line">man1.getName()</span><br><span class="line">man1.getAge() &#x2F;&#x2F; 报错</span><br></pre></td></tr></table></figure>

<h3 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 接口可以校验传参&#x2F;返参</span><br><span class="line">interface paramsInterface &#123;</span><br><span class="line">  name: string</span><br><span class="line">  age: number</span><br><span class="line">&#125;</span><br><span class="line">interface addPersonResponse &#123;</span><br><span class="line">  success: boolean</span><br><span class="line">  code?: number</span><br><span class="line">&#125;</span><br><span class="line">class People &#123;</span><br><span class="line">  public static addPerson(params: paramsInterface): addPersonResponse &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      success: true,</span><br><span class="line">      code: 200</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(People.addPerson(&#123;name: &#39;页面仔&#39;, age: 18&#125;))</span><br></pre></td></tr></table></figure>

<h3 id="范型"><a href="#范型" class="headerlink" title="范型"></a>范型</h3><p>返回值的类型与传入参数的类型是相同</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function identity&lt;T&gt;(arg: T): T &#123; &#x2F;&#x2F;&lt;T&gt;(arg: T[]): T[]</span><br><span class="line">    return arg</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/bottom.png" alt=""></p>
</div></article></div><div class="right-container"><div class="widget"><div id="arAnchorBar"></div></div></div></section></div><div class="right-menu"></div><div class="modal search-modal"><div class="input-field"><input type="text" id="search_input"><label for="search-input">搜索</label></div><div id="search_result" class="search-result"></div></div><div class="blog-overlay"></div><footer class="row"><div class="footer-con"><div class="paginator"><a href="/2020/11/24/js%E5%9F%BA%E7%A1%80/ts-upgrade/" title="Ts进阶" class="prev">PREV</a><a href="/2020/06/08/js%E5%9F%BA%E7%A1%80/ES6%E6%80%BB%E7%BB%93/" title="ES6总结" class="next">NEXT</a></div><a href="#comment" class="comment-anchor"></a><div id="vcomments"></div><script>new Valine({
    el: "#vcomments",
    appId: "fTqcCRR2oHhKQGgjSy86Ifkf-gzGzoHsz",
    appKey: "r1WK7286QLlfxnpbWsjs06xH",
    notify: false,
    verify: false,
    avatar: "robohash",
    visitor: true,
    placeholder: "随便说点什么～.～",
});</script><div class="copyright"><p>Copyright © 2016 - 2022  <a target="_blank">页面仔小杨</a> 版权所有【实战干货、原创分享】 <br></p><p> <span style="padding-right: 6px;">关注公众号：页面仔小杨</span></p></div><div class="totop"><i></i></div></div></footer><script async src="https://cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script src="/scripts/jquery-1.8.2.min.js"></script><script src="/scripts/ar-anchor.js"></script><script src="/scripts/main.js"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>